<template>
	<scroll-view class="list" scroll-y @scrolltolower="scrolltolower">
		<view v-if="infos.length !== 0">
			<view class="cus-search-component">
				<input confirm-type="search" v-model="formData.search_key" @confirm="getMessage()" placeholder="图文日志搜索" />
			</view>
			<view class="project-list" v-for="info in infos" :key='info.id'>
				<view class="info_title">{{info.hard_name}}</view>
				<view class="info_text">{{info.work_name}}</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="image-item scroll-view-item_H" v-for="(item,i) in info.att_list" :key="i">
						<image class="scroll-view-item_H" mode="aspectFill" :src="item.imgurl" @error="imageError" @click="previewImage(info.att_list,i)"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<view v-if="infos.length === 0" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text> 暂 无 数 据 . . . </text>
		</view>
		<uni-load-more v-else :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				infos: [
					// 	{
					// 	att_list: [{
					// 		id: 38124,
					// 		imgurl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"
					// 	}, {
					// 		id: 381284,
					// 		imgurl: "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_mid.jpg"
					// 	}, {
					// 		id: 381284,
					// 		imgurl: "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_mid.jpg"
					// 	}, {
					// 		id: 381284,
					// 		imgurl: "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_mid.jpg"
					// 	}, {
					// 		id: 381284,
					// 		imgurl: "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_mid.jpg"
					// 	}],
					// 	hard_name: "20181204测试项目",
					// 	id: 929,
					// 	work_name: "4.1 施工进度计划安排4.1 施工进度计划安排4.1 施工进度计划安排4.1 施工进度计划安排"
					// }, {
					// 	att_list: [{
					// 		id: 38124,
					// 		imgurl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"
					// 	}, {
					// 		id: 381284,
					// 		imgurl: "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_mid.jpg"
					// 	}],
					// 	hard_name: "20181204测试项目",
					// 	id: 929,
					// 	work_name: "4.1 施工进度计划安排"
					// }
				],
				formData: {
					hard_id: '',
					search_key: '',
					page_no: 1,
					page_size: 10
				},
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.formData.page_no++
			this.loadingType = 1
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/hard_log_image',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: {
					...this.formData,
				},
				success: res => {
					this.infos.push(...res.data.data.list)
					if (res.data.data.list.length < this.formData.page_size) {
						this.loadingType = 2
					} else {
						this.loadingType = 0
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		onLoad(param) {
			this.formData.hard_id = parseInt(param.id)
			this.getMessage()
		},
		methods: {
			getMessage() {
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/hard_log_image',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						...this.formData
					},
					success: res => {
						this.infos.push(...res.data.data.list)
						if (res.data.data.list.length < this.formData.page_size) {
							this.loadingType = 2
						} else {
							this.loadingType = 0
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			previewImage(att_list, i) {
				const imgList = att_list.map(item => {
					return item.imgurl
				})
				uni.previewImage({
					current: imgList[i],
					urls: imgList
				})
			}
		}
	}
</script>

<style>
	.cus-search-component {
		margin-left: 20upx;
		margin-right: 20upx;
	}

	.comment-content {
		width: 100%;
	}

	.project-list {
		margin-left: 15upx;
		margin-right: 15upx;
	}

	.info_title {
		font-size: 40upx;
	}

	.info_text {
		font-size: 30upx;
		opacity: 0.5;
		margin-left: 10upx;
		margin-bottom: 8upx;
	}

	.image-item image {
		width: 150upx;
		height: 150upx;
		margin-right: 10upx;
	}

	.image-list {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 150upx;
		line-height: 150upx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 180upx;
		height: 150upx;
		line-height: 150upx;
	}
</style>
